import { useContext } from 'react';
import styles from './index.module.less';
import Edit from './components/edit/index'
import { Context } from '../../store/Context';
import Background from './components/background/index';
import CuttingLine from './components/cuttingLine';
import Overview from './components/overview/index';
import HoleDesign from './components/holeDesign';
import WhiteInkLayer from './components/whiteInkLayer/index';
import SocketDesign from './components/socketDesign/index';
import Scorching from './components/scorching/ index';

const PropertyPanel = () => {
    const { currentToolBarTab } = useContext(Context);

    return (
        <div className={styles.wrap}>
            {currentToolBarTab === 'overview' && <Overview />}
            {currentToolBarTab === 'imageEdit' && <Edit />}
            {currentToolBarTab === 'backgroundLibrary' && <Background />}
            {currentToolBarTab === 'cuttingLine' && <CuttingLine />}
            {currentToolBarTab === 'holeDesign' && <HoleDesign />}
            {currentToolBarTab === 'whiteInkLayer' && <WhiteInkLayer />}
            {currentToolBarTab === 'socketDesign' && <SocketDesign />}
            {currentToolBarTab === 'scorching' && <Scorching />}
        </div>
    );
};

export default PropertyPanel;